<template>
    <div class="Box">
        <div class="statBox">
            <p>
                <img v-if="true" src="@/assets/videoIcon/dianzan.png"/>
                <span>{{ formatNum(props.stat.like) }}</span>
            </p>
            <p>
                <img v-if="true" src="@/assets/videoIcon/money.png"/>
                <span>{{ formatNum(props.stat.coin) }}</span>
            </p>
            <p>
                <img v-if="true" src="@/assets/videoIcon/favorite.png"/>
                <span>{{ formatNum(props.stat.favorite) }}</span>
            </p>
            <p>
                <img v-if="true" src="@/assets/videoIcon/share.png"/>
                <span>{{ formatNum(props.stat.share) }}</span>
            </p>
        </div>
        <div class="tagBox">
            <p v-if="props.desc">{{ props.desc }}</p>
            <p>
                <span  v-for="item in props.Tags" :key="item.tag_id">
                    <el-popover
                        placement="top-start"
                        :width="220"
                        :show-arrow="false"
                        trigger="hover"
                        popper-style="border:none"
                    >
                        <template #reference>
                            <span>{{ item.tag_name }}</span>
                        </template>
                        <template #default v-if="item.cover && item.head_cover">
                            <tags-card-item  
                                :cover="item.cover"
                                :archive_count="item.archive_count"
                                :tag_name="item.tag_name"
                                :head_cover="item.head_cover"
                                :subscribed_count="item.subscribed_count"
                                :featured_count="item.featured_count"
                            ></tags-card-item>
                        </template>
                    </el-popover>
                </span>
            </p>
        </div>
        <div class="adBox" v-if="props.adInfo">
            <p>
                <span>{{ props.adInfo.dic }}</span>
                <span>本视频参加过 <span>[ {{ props.adInfo.name }} ]</span>活动，该活动已结束</span>
            </p>
            <p>
                <img :src="props.adInfo.cover" />
            </p>

        </div>
    </div> 
</template>

<script lang="ts" setup>
import { tagsCardItem } from '../components'
import { formatNum,formatTime } from '@/utils/format'
interface Props{
    stat:{
        coin:number   //投币
        share:number  //转发
        favorite:number //收藏
        like:number     //喜欢 点赞
        danmaku:number  //弹幕数量
        view:number     //向上取整 看过数量
    }
    desc:string
    Tags:[
            {
                tag_id:number
                cover:string,           //头像
                archive_count:string   //xx投稿
                head_cover:string       //头部背景图片
                tag_name:string
                subscribed_count:number //xx万订阅
                featured_count:number   //xx万精选视频

            }
    ]
    adInfo:{
        act_url:string
        dic:string          //加粗上信息
        name:string         //加出下信息
        cover:string        //背景图片
        h5_cover:string
    }
}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.Box{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    & div:nth-child(1){
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 30px;
    }
    & div:nth-child(2){
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }
}
.statBox{
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #E3e5e7;
    & p{
        @include flexRowCenter;
        color: #61666D;
    }
    & p img{
        width: 35px;
        height: 35px;
        margin-right: 5px;
    }
    & p:nth-child(2) img{
        width: 50px;
        height: 50px;
    }
}
.tagBox{
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #E3e5e7;
    & p:nth-child(1){
        text-align: left;
        max-height: 100px;
        overflow-y: scroll;
        white-space: pre-line;
    }
    //滚动条
    & p:nth-child(1)::-webkit-scrollbar{
        width:0px ;
    }
    & p:nth-child(2){
        padding: 10px 0 0 0;
        width: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
    }
    & p:nth-child(2) span:nth-child(1){
        padding: 5px 15px;
        color: #61666D;
        background: #F1F2F3;
        border-radius: 30px;
        cursor: default;
    }
}
.adBox{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #E3e5e7;
    & p:nth-child(1){
        width: 50%;
        height: 100%;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }
    & p:nth-child(1) span:nth-child(1),span:nth-child(2){
        display: flex;
        justify-content: start;
        max-width: 100%;
        text-align: left;
        @include noWrap;
    }
    & p:nth-child(1) span:nth-child(1),span:nth-child(3){
        font-weight: 700;
    }
    & p:nth-child(2){
        position: relative;
        width: 50%;
        height: 100%;
        background:  linear-gradient(to right,white 40%,rgb(0, 0, 0,0));
    }
    & p:nth-child(2) img{
        position: absolute;
        border-radius: 8px;
        height: 100%;
        right: 0;
        bottom: 0;
        z-index: -1;
    }
    
}
</style>